<%--
  Created by IntelliJ IDEA.
  User: productType
  Date: 2023/9/28
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>添加商品</title>
    <link rel="stylesheet" href="/static/css/form.css">
    <link rel="stylesheet" href="/static/icon/iconfont.css">
    <style>
        .icon i {
            font-size: 30px;
            cursor: pointer;
            user-select: none;
        }
        .icon i:hover{
            background-color: #9E9E9E ;
        }
        #icon-active{
            background-color: #ff9800;
        }
        #icon{
            font-size: 50px;
        }
    </style>
</head>
<body>
<form action="" class="hh-form">
    <div class="form-item">
        <label class="hh-label">商品分类名称：</label><input type="text" class="hh-input hh-input-big" name="name" required>
    </div>
    <div class="form-item">
        <label class="hh-label">商品分类描述：</label><input type="text" class="hh-input hh-input-big" name="desc" required>
    </div>
    <div class="form-item">
        <label class="hh-label">图标：</label>
        <input type="file" class="hh-upload">
        <div class="hh-upload-item">
            <i id="icon"></i>
            <input type="hidden" name="icon">
        </div>
    </div>
    <div class="form-item">
        <label class="hh-label"></label>
        <div class="icon">
            <c:forEach items="${icons}" var="icon">
                <i class="iconfont ${icon}"></i>
            </c:forEach>
        </div>
    </div>
    <div class="form-item">
        <label class="hh-label"></label>
        <input type="submit" class="hh-bt hh-bt-primary submit" value="提交">
        <input type="button" class="hh-bt hh-bt-warning close" value="关闭">
    </div>
</form>
<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
    $(function () {

        //提交
        $("form").submit(function () {
            let data = $('form').serialize();
            $.post('/productType/add', data, function (e) {
                console.log(e)
                if (e.result) {
                    //成功提示
                    parent.layer.msg(e.message, {icon: 1});
                    //关闭弹窗
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    //刷新列表
                    $(".right-body", parent.document).load("/productType/page");
                } else {
                    layer.msg(e.message, {icon: 2});
                }
            })

            // 阻止事件冒泡
            return false;
        })

        //关闭按钮
        $(".close").click(function () {
            console.log(333)
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        })

        // 图标点击
        $(".icon i").click(function () {
            $(".icon i").removeAttr("id");
            $("#icon").attr("class",$(this).attr("class"));
            $(this).attr("id","icon-active");
            $('[name="icon"]').val($(this).attr("class"));
        })

        $(".icon i:eq(0)").click()
    })
</script>
</body>
</html>
